<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="app">
    <smart-avatar username="vuejs"></smart-avatar>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    function fetchURL(username, cb) {
      setTimeout(() => {
        cb('https://avatars1.githubusercontent.com/u/24318019?s=40&v=4');
      }, 500);
    }

    const Avatar = {
      props: ['src'],
      template: `<img :src="src">`
    };

    function withAvatarURL(InnerComponent) {
      return {
        props: ['username'],
        data() {
          return {
            url: 'https://via.placeholder.com/200x200'
          }
        },
        created() {
          fetchURL(this.username, url => {
            this.url = url;
          });
        },
        render(h) {
          return h(InnerComponent, {
            props: {
              src: this.url
            }
          });
        }
      }
    }

    const SmartAvatar = withAvatarURL(Avatar);

    new Vue({
      el: '#app',
      components: { SmartAvatar }
    });
  </script>
</body>
</html>
